import './index.less';
import React from 'react';
import { Checkbox } from 'antd';
import { RollbackOutlined, CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

export default class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            mode: 'preview'// 展示模式：edit or preview
        };
    }

    componentWillMount() {
        this.setState({ list: this.props.list });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ list: nextProps.list });
    }

    handleItem(type, item, val) {
        // 处理不同list的循环赋值事件
        let { list } = this.state;
        for (let i = 0; i < list.length; i++) {
            if (list[i].id === item.id) {
                switch (type) {
                    case 'check':// 标记为已完成
                        list[i].flag = true;
                        list[i].okTime = new Date().format(7);
                        break;
                    case 'rollback':// 标记为未完成
                        list[i].flag = false;
                        list[i].okTime = '';
                        break;
                    case 'editOnChange':// 编辑状态下表单控件的onChange事件
                        list[i].matter = val;
                        break;
                    case 'editDelete':// 编辑状态下删除事项
                        list.splice(i, 1);
                        i--;
                        break;
                    default:
                        break;
                }
                this.setState({ list });
                break;
            }
        }
    }

    addItem() {
        // 添加事项
        let { list } = this.state;
        list.push({ id: list.length + 1, matter: '', okTime: '', flag: false });
        this.setState({ list });
    }

    render() {
        let { list, mode } = this.state;
        return (
            <div className="todo-list">
                {mode === 'preview' && (
                    <div>
                        <h6 className="fw-b">
                            未完成
                            <span className="btn-edit" onClick={() => this.setState({ mode: 'edit' })}>编辑</span>
                        </h6>
                        <ul>
                            {list.filter((item) => !item.flag).map((item) => (
                                <li key={item.id}>
                                    <Checkbox onChange={() => this.handleItem('check', item)}>{item.matter}</Checkbox>
                                </li>
                            ))}
                        </ul>
                        <hr />
                        <h6 className="fw-b">已完成</h6>
                        <ul>
                            {list.filter((item) => item.flag).map((item) => (
                                <li key={item.id} className="clear">
                                    <p className="ok-li">
                                        <span className="dis-ib">{item.matter}</span>
                                        <RollbackOutlined className="ok-rollback"
                                            onClick={() => this.handleItem('rollback', item)} title="标记为未完成"
                                        />
                                        <span className="ok-time">{item.okTime}</span>
                                    </p>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
                {mode === 'edit' && (
                    <div>
                        <h6 className="fw-b">
                            未完成
                            <span className="btn-edit" onClick={() => this.setState({ mode: 'preview' })}>完成</span>
                        </h6>
                        <ul>
                            {list.filter((item) => !item.flag).map((item) => (
                                <li key={item.id} className="no-li">
                                    <input onChange={(e) => this.handleItem('editOnChange', item, e.target.value)}
                                        value={item.matter}
                                    />
                                    <CloseCircleOutlined className="no-add"
                                        onClick={() => this.handleItem('editDelete', item)} title="删除该事项"
                                    />
                                </li>
                            ))}
                            <li className="no-li">
                                <PlusCircleOutlined className="no-add" onClick={() => this.addItem()} title="添加事项" />
                            </li>
                        </ul>
                        <hr />
                        <h6 className="fw-b">已完成</h6>
                        <ul>
                            {list.filter((item) => item.flag).map((item) => (
                                <li key={item.id} className="clear">
                                    <p className="ok-li">
                                        <span className="dis-ib">{item.matter}</span>
                                        <CloseCircleOutlined className="ok-rollback"
                                            onClick={() => this.handleItem('editDelete', item)}
                                            title="删除该事项" type="close-circle"
                                        />
                                        <span className="ok-time">{item.okTime}</span>
                                    </p>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
            </div>
        )
    }
}
export { TodoList };